<style>

    /* nav */
    nav.navbar-inverse {
        background-color: var(--background-white-color);
        border-color: #fff;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
        top: 0;
    }

    nav.navbar-inverse .navbar-brand {
        height: 72px;
        padding: 5px 0 5px 20px;
        margin-right: 100px;
    }

    nav.navbar-inverse .navbar-brand .logo {
        width: 36px;
        height: 36px;
        margin-right: 12px;
    }

    nav.navbar-inverse .navbar-brand .title {
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
    }

    nav.navbar-inverse .navbar-nav > li > a {
        height: 72px;
        line-height: 43px;
        font-size: 16px;
        color: var(--primary-black-color);
        padding: 15px 20px;
    }

    nav.navbar-inverse .navbar-nav > li > a:before {
        height: 0;
        visibility: hidden;
        overflow: hidden;
        user-select: none;
        pointer-events: none;
        font-weight: 600;
    }

    nav.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
        color: var(--primary-color);
    }

    nav.navbar-inverse .navbar-nav > .active > a {
        background-color: inherit;
        color: var(--primary-color);
        font-weight: 500;
    }

    nav.navbar-inverse .navbar-nav > .active > a:hover {
        background-color: var(--background-white-color);
        color: var(--primary-color);
        font-weight: 500;
    }

    .navbar-inverse .navbar-collapse {
        border-color: var(--background-white-color);
    }
</style>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">
                    <img src="{$moduleAttachUrl}/static/images/logo.png" alt="" class="logo">
                </span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand flex-center" href="{:url('/tool')}">
                <img src="{$website['logo'] ? $website['logo'] : $moduleAttachUrl . '/static/images/logo.png'}" alt="" class="logo">
                <span class="f20 h26 b c212 lh26 ml10 h-head-title">{$website['title']}</span>
            </a>
        </div>

        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li {if $url == '/tool.html'}class="active"{/if}>
                    <a href="{:url('/tool')}">首页</a>
                </li>
                <li {if $url == '/tool/audio-to-text.html'}class="active"{/if}>
                    <a href="{:url('/tool/audio-to-text')}">音频转换</a>
                </li>
                <li {if $url == '/tool/qrcode.html'}class="active"{/if}>
                    <a href="{:url('/tool/qrcode')}">二维码</a>
                </li>
                <li {if $url == '/tool/barcode.html'}class="active"{/if}>
                    <a href="{:url('/tool/barcode')}">条形码</a>
                </li>
                <li {if $url == '/tool/unixtime.html'}class="active"{/if}>
                    <a href="{:url('/tool/unixtime')}">时间戳</a>
                </li>
                <li {if $url == '/tool/md5.html'}class="active"{/if}>
                    <a href="{:url('/tool/md5')}">MD5</a>
                </li>
                <li {if $url == '/tool/base64.html'}class="active"{/if}>
                    <a href="{:url('/tool/base64')}">BASE64</a>
                </li>
                <li {if $url == '/tool/json.html'}class="active"{/if}>
                    <a href="{:url('/tool/json')}">JSON</a>
                </li>
                <li {if $url == '/tool/css.html'}class="active"{/if}>
                    <a href="{:url('/tool/css')}">CSS</a>
                </li>
                <li {if $url == '/tool/js.html'}class="active"{/if}>
                    <a href="{:url('/tool/js')}">JS</a>
                </li>
            </ul>
        </div>

    </div>
</nav>